<template>
	<view class="box">
		<view class="searchBox">
			<view class="search">
				<view class="searchFunction">
					<view class="iconfont icon-search"></view>
					<input v-model="keyword"  placeholder="请输入商品名称"  focus="true"/>
					<view v-show="keyword" style="color: #ccc;" class="iconfont icon-act_qingchu" @click="keyword=''"></view>
				</view>
				<view class="searchBtn" @click="toSearchList" >
					搜索
				</view>
			</view>
		</view>
		<view class="searchHistory">
			<view class="title">
				<text>历史搜索</text>
				<text v-if="allDelete" class="iconfont icon-delete1" @click="allDeleteShow"></text>
				<view v-else class="btn">
					<text @click="confirmAll">全部</text>
					<text @click="allDeleteShow">取消</text>
				</view>
			</view>
			<view class="contentList" @click="selectChecked">
				<view class="item" v-for="(keyWord,index) in keyWordList" :key="keyWord" >
					<view :data-keyword="keyWord" :data-index="index">{{keyWord}}</view>
					<text :class="{active: allDelete}" @click="deleteKeyWord(index)">×</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog" :mask-click="true">
			<uni-popup-dialog mode="base" title="全部删除" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { home } from '@/api'
	import { ref,nextTick } from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let popup = ref()
	let keyword = ref('')
	let keyWordList = ref([])
	let allDelete= ref(true)
	// 去到搜索列表
	function toSearchList() {
		if(keyword.value === '') {
			uni.$u.toast('请输入商品名称')
			return
		}
		let k =  keyWordList.value.findIndex( v => {
			return v === keyword.value
		})
		if(k !== -1){
			keyWordList.value.splice(k,1)
		}
		keyWordList.value.unshift(keyword.value)
		try{
			uni.setStorageSync( 'keyWordList', JSON.stringify(keyWordList.value))
			uni.navigateTo({
				url: `/pages/search/search_list?keyword=${keyword.value}`
			})
			keyword.value = ''
			allDelete.value = true
		}catch(err){
			console.log(err)
		}
		
	}
	// 删除历史记录
	function deleteKeyWord(index){
		keyWordList.value.splice(index,1)
		uni.setStorageSync( 'keyWordList', JSON.stringify(keyWordList.value))
	}
	function selectChecked(e) {
		let { keyword:keyWord, index } = e.target.dataset
		if(keyWord) {
			keyword.value = keyWord
		}
	}
	// 显示删除
	function allDeleteShow(){
		allDelete.value = !allDelete.value
	}
	// 
	function confirmAll() {
		nextTick(() => {
			popup.value.open()
		})
	}
	function confirm() {
		nextTick(() => {
			keyWordList.value = []
			uni.setStorageSync( 'keyWordList', JSON.stringify(keyWordList.value))
			allDelete.value = true
			popup.value.close()
		})
	}
	function close() {
		nextTick(() => {
			popup.value.close()
		})
	}
	onLoad( () => {
		try{
			if(uni.getStorageSync('keyWordList') !=='') {
				keyWordList.value = JSON.parse(uni.getStorageSync('keyWordList'))
			}
		}catch(err) {
			console.log(err)
		}
	})
</script>

<style lang="scss" scoped>
.searchBox{
	padding-top: 3rpx;
	position: relative;
	.search{
		padding: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		.searchFunction{
			flex: 1;
			display: flex;
			align-items: center;
			border: 1px solid #ccc;
			padding: 15rpx;
			border-radius: 50rpx;
			margin: 0 15rpx ;
			.iconfont{
				font-size: 35rpx;
				margin: 0 10rpx;
			}
			input{
				flex: 1;
				padding-right: 10rpx;
				color: #040404;
			}
		}
		.searchBtn{
			color: #fff;
			background-color: #fcd000;
			padding: 15rpx 30rpx;
			border-radius: 15rpx;
			font-size: 30rpx;
			&:active{
				opacity: 0.8;
				
			}
		}
	}

	.searchModel{
		width: 73%;
		position: absolute;
		top: 80%;
		left: 40rpx;
		background-color: #ccc;
		padding: 15rpx;
		
		
	}
}
.searchHistory{
	padding: 40rpx 25rpx 15rpx 40rpx;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 35rpx;
		font-weight: 550;
		.iconfont{
			font-size: 40rpx;
		}
		.btn{
			font-weight: normal;
			font-size: 15rpx;
			color: #ccc;
			text:last-child{
				margin-left: 15rpx;
			}
		}
	}
	.contentList{
		margin-top: 15rpx;
		display: flex;
		flex-wrap: wrap;
		.item{
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 15rpx;
			padding: 10rpx 35rpx;
			background-color: #eee;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: bold;

			text{
				position: absolute;
				top: -10rpx;
				right: 5rpx;
			}
			.active{
				display: none;
			}
		}
	}
}
</style>
